<template>
    <div>
        <Row class="margin-top-10" :gutter="10">
            <Col :md="4" :lg="4">
                <Card :gutter="10">
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse"></Icon>
                        关系树
                    </p>
                    <div class="line-chart-con">
                        <oc-tree :list.sync='treeData' :func='nodeClick' :contextmenu='contextmenuClick' :is-open='true'></oc-tree>
                    </div>
                </Card>
            </Col>
            <Col :md="20" :lg="20">
                 <Card>
                    <p slot="title" class="card-title">
                        <Row class="" :gutter="10">
                            <Col :md="4" :lg="2">
                                <div style="margin-top: 2px;">
                                    <Icon type="ios-pulse"></Icon>
                                    {{this.$route.meta.title}}
                                </div>
                            </Col>
                            <Col :md="20" :lg="22">
                                <Form :model="formItem" label-position="left" inline>
                                    
                                        <Select v-model="model2" size="small" style="width:100px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                        :
                                        <Input size="small" v-model="formItem.input" style="width: 120px" placeholder="请输入用户名"></Input>
                                    
                                    <Button type="primary"  size="small" style="margin-top: 0px;">查询</Button>
                                    <Button type="ghost"  size="small" style="margin-top: 0px;">重置</Button>
                                    <Button type="ghost"  size="small" style="margin-top: 0px;">返回上级</Button>                                    
                                    <Button type="primary"  size="small" style="float: right;">新增会员</Button>                                    
                                </Form>
                            </Col>
                        </Row>
                    </span>
                    <div class="line-chart-con">
                        <Table border stripe :columns="title" :data="data" ></Table>
                        <Row class="margin-top-10" :gutter="10">
                            <Col :md="12" :lg="12">
                                <Page :total="100"  class-name="page-margin-top" show-elevator></Page>
                            </Col>
                            <Col :md="12" :lg="12">
                                
                            </Col>
                        </Row>
                        
                    </div>
                </Card>
            </Col>
            
        </Row>

        <!-- <button v-on:click="openDialog" >openDialog</button> -->
    </div>
</template>
<style lang="less">
    // .ivu-form-item{
    //     margin-bottom:0px;
    // }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
            
        }
    }
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            formItem:{
                    input:''
            },
            popup:false,
            cityList: [
                    {
                        value: '用户名',
                        label: '用户名'
                    },
                    {
                        value: '充值码',
                        label: '充值码'
                    },
                    {
                        value: '姓名',
                        label: '姓名'
                    }
                    
                ],
                model2: '用户名',
            data:[
                {
                    username:'zhangsan',
                    dj:'0',
                    cd:'0',
                },
                {
                    username:'lishi',
                    dj:'1',
                    cd:'0',
                },
                {
                    username:'wangwu',
                    dj:'0',
                    cd:'1',
                },
                {
                    username:'zhangsan',
                    dj:'0',
                    cd:'0',
                },
                {
                    username:'lishi',
                    dj:'1',
                    cd:'0',
                },
                {
                    username:'wangwu',
                    dj:'0',
                    cd:'1',
                },
                {
                    username:'zhangsan',
                    dj:'0',
                    cd:'0',
                },
                {
                    username:'lishi',
                    dj:'1',
                    cd:'0',
                },
                {
                    username:'wangwu',
                    dj:'0',
                    cd:'1',
                },
                
            ],
            treeData:[{
          id:2,
          name:"（分公司）",
          children:[{
             id:3,
             name:"（大股东）",
             children:[]
          },{
             id:7,
             name:"（大股东）",
             children:[{
                id:9,
                name:"（股东）",
                url:""
             },{
                id:10,
                name:"（股东）",
                url:"",
                children:[{
                    id:11,
                    name:"（总代）",
                    url:""
                }]
             }]
          }]
      }],
            title:[
                {
                    title:'用户名',
                    key: 'username',
                    align:'center',
                    width:'90'
                },
                {
                    title:'邀请码',
                    key: '',
                    align:'center',
                },
                {
                    title:'安全码',
                    key: '',
                    align:'center',
                },
                {
                    title:'姓名',
                    key: '',
                    align:'center',
                },
                {
                    title:'上级账户',
                    key: '',
                    align:'center',
                },
                {
                    title:'可用余额',
                    key: '',
                    align:'center',
                },
                {
                    title:'团队总余额',
                    key: '',
                    align:'center',
                },
                {
                    title:'本人赊欠',
                    key: '',
                    align:'center',
                },
                {
                    title:'团队赊欠',
                    key: '',
                    align:'center',
                },
                {
                    title:'注册地址',
                    key: '',
                    align:'center',
                },
                {
                    title:'最近登录时间',
                    key: '',
                    align:'center',
                },
                {
                    title:'账户状态',
                    key: '',
                    align:'center',
                },
                {
                    title:'用户备注',
                    key: '',
                    align:'center',
                },
                {
                    title:'操作',
                    key: '',
                    width: 200,
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                           this.userEdit(params.index)
                                        },
                                    },
                                    
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.backFlow(params.index)
                                        }
                                    }
                                },'返水'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                    },
                                    on: {
                                        click: () => {
                                            this.lookSubordinate(params.index)
                                        }
                                    }
                                },'查看下级'),
                            ]);
                    }
                },
            ]
                
            
        }
    },
    computed: {
        
    },
    methods: {
        // 树，点击节点
        nodeClick:function(m){
            
            
        },
        // 树，右击事件
        contextmenuClick:function(m){
            
            
        },
        //编辑用户信息
        userEdit(i){
            this.popup=!this.popup
            
        },
        //返水
        backFlow(i){

        },
        //下级
        lookSubordinate(i){
            
        },
        //上级
        lookSuperiors(i){

        },
    }
};
</script>
